<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <link href="/static/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/static/zTree/metroStyle/metroStyle.css">
</head>
<div style="padding:10px 50px 10px 10px">
    <fieldset class="layui-elem-field mt10">
        <legend style="font-size: 16px;">选择权限</legend>
        <form id="roleForm" method="post" action="/pc/sys/role/edit">
            <input type="hidden" name="id" value="${role.id!}"/>
            <table width="100%" cellpadding="5">
                <tr>
                    <td>
                        <input type="hidden" type="text" id="perm" name="perm" readonly value="${role.perm!}">
                    </td>
                </tr>
            </table>
            <div  id="tree" class="ztree" style="margin-left: 30px;margin-bottom: 20px"></div>
            <div>
                <div class="layui-input-inline">
                    <button id="submitButton" class="layui-btn" lay-submit lay-filter="*">保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="closeAll()">取消</button>
                </div>
            </div>
        </form>
    </fieldset>
</div>
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/zTree/jquery.ztree.all.min.js"></script>
<script src="/static/zTree/my_ztree.js"></script>
<script type="text/javascript">
    var setting = {
        check:{
            enable:true
        },
        data: {
            simpleData: {
                pIdKey:"pid",
                enable: true
            }
        }

    };

    $(document).ready(function(){
        $.fn.zTree.init($("#tree"), setting, ${permTree!});
        //$.fn.zTree.getZTreeObj("tree").expandAll(true);
    });

    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(*)', function(data){
            $('#submitButton').attr("disabled",true);
            setCheckValue();
            return false; //阻止表单跳转。
        });
    });

    function setCheckValue(){
        var treeObj=$.fn.zTree.getZTreeObj("tree"),
                nodes = treeObj.getCheckedNodes(true),
                checkIds = new Array();
        for(var i = 0; i < nodes.length; i++){
            checkIds.push(nodes[i].id);
        }
        $('#perm').val(checkIds.join(","));

        $.post($("#roleForm").attr("action"), $("#roleForm").serialize(), function(data){
            if(data.status == 200){
                layer.alert(data.msg, {
                    icon: 1,
                    skin: 'layer-ext-moon'
                },function () {
                    parent.layer.closeAll();
                });
            }else{
                layer.alert(data.msg, {
                    icon: 2,
                    skin: 'layer-ext-moon'
                });
            }
        });
    }
    function closeAll() {
        parent.layer.closeAll();
    }
</script>